<template>
  <div class="main clearfix">
    <div class="main-container container clearfix">
      <div class="left-container">
        <ul class="head">
          <li v-for="(item,index) in routeMsg" :key="index" @click="changeActive(index)" class="head-item" :class="{active: item.isActive}">
            {{item.content}}
          </li>
        </ul>
        <all-question />
      </div>
      <div class="right-container">
        <div class="box bs">
          <ul class="write">
            <li class="item">
              <div class="circle circle1">
                <Icon type="ios-list-box-outline" />
              </div>
              <span>回答问题</span>
            </li>
            <li class="item">
              <div class="circle circle2">
                <Icon type="ios-videocam-outline" />
              </div>
              <span>发视频</span>
            </li>
            <li class="item">
              <div class="circle circle3">
                <Icon type="ios-create-outline" />
              </div>
              <span>写文章</span>
            </li>
            <li class="item">
              <div class="circle circle4"><Icon type="md-at" /></div>
              <span>写想法</span>
            </li>
          </ul>
          <ul class="answer-bin">
            <li class="item">
              <a href="#">稍后答</a>
            </li>
            <li class="item">
              <a href="#">草稿箱</a>
            </li>
          </ul>
        </div>
        <CreateCenter />
        <ul class="little-card bs">
          <li class="card">
            <svg
              style="color: rgb(255, 207, 0)"
              fill="currentColor"
              viewBox="0 0 24 24"
              width="24"
              height="24"
            >
              <path
                d="M13.693 10.354l1.634-7.542c.195-.901-.16-1.083-.798-.39l-9.18 9.97c-.638.693-.377 1.254.582 1.254h5.376l-1.634 7.542c-.195.901.16 1.083.798.39l9.18-9.97c.638-.693.377-1.254-.582-1.254h-5.376z"
              ></path>
            </svg>
            <p>Live</p>
          </li>
          <li class="card">
            <svg
              style="color: rgb(67, 212, 128)"
              fill="currentColor"
              viewBox="0 0 24 24"
              width="24"
              height="24"
            >
              <path
                d="M16 17.649V2.931a.921.921 0 0 0-.045-.283.943.943 0 0 0-1.182-.604L4.655 5.235A.932.932 0 0 0 4 6.122v14.947c0 .514.421.931.941.931H19.06c.52 0 .941-.417.941-.93V7.292a.936.936 0 0 0-.941-.931h-.773v12.834a.934.934 0 0 1-.83.924L6.464 21.416c-.02.002 2.94-.958 8.883-2.881a.932.932 0 0 0 .653-.886z"
                fill-rule="evenodd"
              ></path>
            </svg>
            <p>书店</p>
          </li>
          <li class="card">
            <svg
              style="color: rgb(0, 132, 255)"
              fill="currentColor"
              viewBox="0 0 24 24"
              width="24"
              height="24"
            >
              <path
                d="M10.786 8.41a8.938 8.938 0 0 0-3.968-2.528c-.305-1.719.814-3.337 2.442-3.741 1.221-.405 2.646.101 3.46 1.011 1.045 1.38.915 3.64.814 4.348-.102 1.315-1.221 3.034-1.323 3.135-.305-.809-.814-1.517-1.425-2.225zm-2.442 2.832c-1.526.202-3.052 1.01-4.171 2.123-1.12-.404-1.934-1.314-2.137-2.427-.316-2.427 1.526-3.64 2.849-3.842 1.628-.371 2.849.505 4.07 1.415 1.146 1.012 2.035 2.63 2.035 2.73-.916-.202-1.832-.1-2.646 0zm4.986.303c.509-.607.931-1.586 1.12-2.225.318-1.039.61-3.134.203-4.651 1.323-1.011 3.154-1.011 4.477.303 1.235 1.146 1.017 2.933.814 3.438-.663 1.581-1.933 2.326-3.256 2.832-1.221.404-3.256.303-3.358.303zm-2.645 1.011c-.51.607-.916 1.416-1.221 2.326-.407 1.314-.643 3.06-.102 4.55-1.323 1.011-3.256 1.011-4.477-.202-1.198-1.124-1.018-2.932-.814-3.438.599-1.605 1.933-2.326 3.256-2.831.916-.304 3.256-.405 3.358-.405zm9.259-1.82c1.017.404 1.933 1.315 2.035 2.427.233 2.57-1.526 3.64-2.849 3.842-1.526 0-2.85-.505-4.07-1.415-1.018-.81-2.035-2.528-2.035-2.63.916.203 1.831.102 2.645 0 1.628-.404 3.053-1.112 4.274-2.224zm-6.716 4.854c1.065 1.08 2.442 2.022 4.07 2.528.306 1.719-.814 3.235-2.442 3.741-1.22.405-2.645-.101-3.46-1.011-1.1-1.481-1.017-3.54-.915-4.247.102-1.315 1.221-3.034 1.323-3.135.305.708.721 1.44 1.424 2.124z"
              ></path>
            </svg>
            <p>圆桌</p>
          </li>
          <li class="card">
            <svg
              style="color: rgb(15, 136, 235)"
              fill="currentColor"
              viewBox="0 0 24 24"
              width="24"
              height="24"
            >
              <path
                d="M4.076 16.966a4.19 4.19 0 0 1 1.05-1.76l8.568-8.569a.524.524 0 0 1 .741 0l2.928 2.927a.524.524 0 0 1 0 .74l-8.568 8.57c-.49.49-1.096.852-1.761 1.051l-3.528 1.058a.394.394 0 0 1-.49-.488l1.06-3.53zM20.558 4.83c.59.59.59 1.546 0 2.136l-1.693 1.692a.503.503 0 0 1-.712 0l-2.812-2.812a.504.504 0 0 1 0-.712l1.693-1.693a1.51 1.51 0 0 1 2.135 0l1.389 1.389z"
              ></path>
            </svg>
            <p>专栏</p>
          </li>
          <li class="card">
            <svg
              style="color: rgb(84, 120, 240)"
              fill="currentColor"
              viewBox="0 0 24 24"
              width="24"
              height="24"
            >
              <path
                d="M11.267 10.188h-2.69a.26.26 0 0 0-.261.26v.508c0 .149.117.26.262.26h2.896v1.54H8.578a.26.26 0 0 0-.262.259v.508c0 .15.117.26.262.26h2.896v2.31c0 .139.119.257.265.257h.522a.258.258 0 0 0 .265-.257v-2.31h2.896a.26.26 0 0 0 .262-.26v-.508a.257.257 0 0 0-.262-.26h-2.896v-1.54h2.896a.26.26 0 0 0 .262-.26v-.507a.257.257 0 0 0-.262-.26h-2.69l2.51-2.636a.26.26 0 0 0-.004-.366l-.423-.413a.253.253 0 0 0-.36.01L12 9.418 9.545 6.784a.248.248 0 0 0-.36-.011l-.423.413a.264.264 0 0 0-.004.366l2.509 2.636zM12 19.973c-1.101 0-2.16-.15-3.152-.43-.532.18-5.27 2.177-4.743 1.179.527-.998 1.58-2.746.806-3.25C3.11 15.936 2 13.822 2 11.486 2 6.8 6.477 3 12 3s10 3.8 10 8.487-4.477 8.486-10 8.486z"
              ></path>
            </svg>
            <p>付费咨询</p>
          </li>
          <li class="card">
            <svg
              style="color: rgb(88, 104, 209)"
              fill="currentColor"
              viewBox="0 0 24 24"
              width="24"
              height="24"
            >
              <path
                d="M21 9.749v9.91c0 .74-.604 1.341-1.35 1.341H4.35C3.604 21 3 20.4 3 19.659V9.319c0-.503.283-.963.733-1.193l4.892-2.5V3.341c0-.74.604-1.341 1.35-1.341.267 0 .527.078.749.225l9.675 6.408c.375.249.601.668.601 1.116zM8.297 8.307L5.372 9.802A.223.223 0 0 0 5.25 10v8.54c0 .124.1.224.225.224h8.586a.223.223 0 1 0 .124-.41l-4.959-3.259a1.339 1.339 0 0 1-.601-1.116V8.506a.224.224 0 0 0-.328-.199z"
              ></path>
            </svg>
            <p>百科</p>
          </li>
        </ul>
      <PersonDetail />
      </div>
    </div>
  <BackToTop />
  </div>

</template>

<script>
import BackToTop from '@/components/BackToTop'
import AllQuestion from '@/components/question/AllQuestion'

import CreateCenter from '@/components/main/CreateCenter';
import PersonDetail from '@/components/main/PersonDetail'
export default {
  name: "Main",
  data() {
    return {
      routeMsg: [
        { name: "recommend", content: "为你推荐", isActive: true },
        { name: "hot", content: "人气问题", isActive: false },
        { name: "new", content: "最新问题", isActive: false },
        { name: "invite", content: "邀请回答", isActive: false }
      ],
    };
  },
  methods: {
    changeActive(index) {
      this.routeMsg.find((item) => item.isActive).isActive = false;
      this.routeMsg[index].isActive = true;
    },
  },
  mounted() {
    //   监听滚动条到达底部
    // window.addEventListener(
    //   "scroll",
    //   () => {
    //     const clientHeight = document.documentElement.clientHeight;
    //     const scrollTop = Math.ceil(document.documentElement.scrollTop);
    //     const scrollHeight = document.documentElement.scrollHeight;
    //     if (clientHeight + scrollTop >= scrollHeight) {
    //       console.log("到底了");
    //     }
    //   },
    //   false
    // );
  },
  components: {
    BackToTop,
    AllQuestion,
    CreateCenter,
    PersonDetail
  },
};
</script>

<style lang="scss" scoped>
$height: 50rem;
$color: #0084ff;
$color: #2d8cf0;
$cm_color: #8590a6;
.main {
  color: #121212;
  .main-container {
    padding-top: 1.4rem;
    .left-container {
      float: left;
      width: 71rem;
      background: #fff;
      .head {
        display: flex;
        align-items: center;
        height: 6rem;
        margin-left: 1.5rem;
        border-bottom: 1px solid #eee;
        .head-item {
          font-size: 1.4rem;
          color: #444;
          background-color: rgba(133,144,166,.12);
          text-align: center;
          margin: 0 .8rem;
          width: 8rem;
          height: 3.2rem;
          line-height: 3.2rem;
          border-radius: 1.6rem;
          cursor: pointer;
        }
        .active {
          color: $color;
        }
      }
    }
    .right-container {
      float: right;
      width: 27rem;
      height: $height;
      .box {
        height: 18rem;
        border: 1px solid #eee;
        background: #fff;
        .write {
          display: flex;
          align-items: center;
          justify-content: space-around;
          height: 12rem;
          border-bottom: 1px solid #eee;
          .item {
            cursor: pointer;
            text-align: center;
            .circle {
              margin: 0 auto;
              width: 4rem;
              height: 4rem;
              text-align: center;
              line-height: 4rem;
              font-size: 2.3rem;
              border-radius: 50%;
              margin-bottom: 0.7rem;
            }
            .circle1 {
              color: blue;
              background: #e1f1ff;
            }
            .circle2 {
              color: #f40;
              background: #fff3e2;
            }
            .circle3 {
              color: rgb(244, 200, 7);
              background: #fef9e2;
            }
            .circle4 {
              color: rgb(38, 191, 191);
              background: #e5f7f7;
            }
            span {
              font-size: 1.2rem;
            }
          }
        }
        .answer-bin {
          display: flex;
          height: 6rem;
          .item {
            flex-grow: 1;
            height: 100%;
            text-align: center;
            line-height: 6rem;
            color: $cm_color;
            a {
              &:hover {
                color: #175199;
              }
            }
          }
          .item:nth-of-type(1) {
            border-right: 1px solid #eee;
          }
        }
      }
      
      .little-card {
        display: grid;
        grid-template-columns: repeat(3, 33.3%);
        grid-template-rows: repeat(2, 50%);
        justify-items: center;
        align-items: center;
        background: #fff;
        margin-top: 1rem;
        height: 17.5rem;
        border: 1px solid #eee;
        cursor: pointer;
        .card {
          text-align: center;
          p {
            margin-top: 0.5rem;
            color: $cm_color;
            &:hover {
              color: rgb(88, 104, 209);
            }
          }
        }
      }
   
    }
  }
}
</style>